<template>
	<div id="category">
		<van-nav-bar>
			<template #left>
				<van-icon @click="back" class-prefix="iconfont" name="fanhui1" size="18" />
				<p class="leftText">{{$route.query.listName}}</p>
			</template>
		</van-nav-bar>
		<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
		  <div v-for="item in $store.state.homeCategory">
			  <van-cell :key="item.id">
			  		<van-card>
						<!-- 图片 -->
						<template #thumb>
							<div class="boxImg">
								<img :src="item.cover" class="van-image__img"/>
								<span class="ImgLabel" :class="item.cover_label"></span>
							</div>
						</template>
						
						<!-- 标题 -->
			  			 <template #title>
			  			    <h3 class="title">{{item.title}}<small v-if="item.kind">{{item.kind}}</small></h3>
			  			  </template>
			  			
						<!-- 详情 -->  
			  			  <template #desc>
							<p class="subtitle" v-if="item.subtitle">{{item.subtitle}}</p>  
			  				<p class="author" v-if="item.author">{{item.author}}</p>
			  				<p class="detail" v-if="item.abstract">{{item.abstract}}</p>
			  			  </template>
			  			  
			  			  <template #price>
			  				<!-- <p  v-if="item.price" class="price"><small>￥</small>{{item.price}}</p> -->
							<div v-if="item.price">
								<p v-if="item.price!=item.fixed_price" class="newAndOldPrice"> <strike>{{(item.fixed_price/100).toFixed(2)}} </strike> ￥{{(item.price/100).toFixed(2)}}</p>
								<p v-else class="price">￥{{(item.price/100).toFixed(2)}}</p>
							</div>
							<p v-else class="price">免费</p>
			  			  </template>
			  
			  		</van-card>
			  </van-cell>
		  </div>
		</van-list>
	</div>
</template>

<script>
	export default{
		data() {
		  return {
		    loading: false,
		    finished: false,
		  };
		},
		mounted() {
			this.$store.dispatch('getHomeCategory',this.$route.params.name)
		},
		methods: {
			onLoad() {
				this.$store.dispatch('getHomeCategory',this.$route.params.name)
				
				//         // 加载状态结束
				//         this.loading = false;
				
				//         // 数据全部加载完成
				//         if (this.list.length >= 40) {
				//           this.finished = true;
				//         }
			},
			back(){
				this.$router.back()
			},
			detail(){
				// this.$router.push('/detail')  

			}
		},
	}
</script>

<style lang="scss">
	#category{
		// 头部
		.van-nav-bar{
			position: sticky;
			top: 0;
			box-shadow: 0 0.0625rem 0.25rem #dadada;
			background-color: #FAFAFA;
			
			.leftText{
				font-size: 1.125rem;
				margin-left: 0.9375rem;
			}
		}

		// 列表
		.van-cell{
			padding: 1.25rem 0.9375rem;
			border-bottom: 1px solid #ddd;
			background-color: #F8F9F9;
		}
		.van-card{
			padding: 0;
		}
		
		.van-card__thumb{
			margin-right: 0.9375rem;
			width: 30%;
			height: 52%;
		}
		
		.title{
			font-size: 1rem;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		p{
			font-size: 0.875rem;
		}
		.subtitle{
			font-weight: bold;
			color: #333333;
			
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}
		.author,.detail{
			color: #A6A6A6;
		}
		.author{
			margin-bottom: 0.5rem;
		}
		.detail{
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
		}
		.newAndOldPrice{
			color: #fa595f;
			strike{
				color: #A6A6A6;
			}
		}
		
		// 图片
		.boxImg{
			position: relative;
			
			img{
				width: 100%;
				height: 100%;
				border-radius: 0.25rem;
				box-shadow: 0.0625rem 0.0625rem 0.125rem black;
			}
			
			.ImgLabel{
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				overflow: hidden;
				pointer-events: none;
			}
			.ImgLabel::before{
				position: absolute;
				top: 18.5px;
				right: 18.5px;
				width: 105px;
				height: 30px;
				font-size: 18px;
				line-height: 30px;
				text-align: center;
				transform: translate(55%, -70%) rotate(45deg) scale(.5);
			}
			.vip-can-read-label::before{
				background-color: #d6c0a2;
				color: #333;
				content: '会员';
			}
			.sale-label::before{
				background-color: #fa595f;
				color: #ffffff;
				content: '特价';
			}
			.free-label::before{
				background-color: #3e82f8;
				color: #ffffff;
				content: '免费';
			}
		}
	}
</style>